<!-- login.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录 | 欢迎回来</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C6CF',
              400: '#909399',
              500: '#606266',
              600: '#303133',
              700: '#1E1E1E',
            }
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
            'input': '0 2px 5px rgba(22, 93, 255, 0.08)',
          }
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .bg-gradient-primary {
        background: linear-gradient(135deg, #165DFF 0%, #0E42B3 100%);
      }
      .transition-all-300 {
        transition: all 300ms ease-in-out;
      }
      .form-input-focus {
        @apply border-primary shadow-input ring-1 ring-primary/20;
      }
    }
  </style>
</head>

<body class="font-inter bg-neutral-100 min-h-screen flex items-center justify-center p-4">
  <!-- 主容器 -->
  <div class="w-full max-w-6xl bg-white rounded-20 shadow-card overflow-hidden flex flex-col md:flex-row">
    <!-- 左侧图片区域 -->
    <div class="hidden md:flex md:w-2/5 relative">
      <div class="absolute inset-0 bg-gradient-primary opacity-80 z-10"></div>
      <img src="https://picsum.photos/id/1015/800/1200" alt="登录背景" class="w-full h-full object-cover">

      <div class="absolute inset-0 z-20 flex flex-col justify-between p-8">
        <div>
          <h1 class="text-white text-4xl font-bold mb-2 text-shadow">欢迎回来</h1>
          <p class="text-white/90 text-lg">登录您的账户，继续您的旅程</p>
        </div>

        <div>
          <div class="flex items-center space-x-3 mb-4">
            <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
              <i class="fa-solid fa-lock text-white"></i>
            </div>
            <div>
              <h3 class="text-white font-semibold">安全登录</h3>
              <p class="text-white/80 text-sm">采用多重加密保护您的账户安全</p>
            </div>
          </div>

          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
              <i class="fa-solid fa-headphones text-white"></i>
            </div>
            <div>
              <h3 class="text-white font-semibold">24/7 支持</h3>
              <p class="text-white/80 text-sm">随时为您提供专业的帮助与支持</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧表单区域 -->
    <div class="w-full md:w-3/5 p-6 md:p-12">
      <!-- 移动端标题 -->
      <div class="md:hidden mb-8">
        <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-neutral-700 mb-2">欢迎回来</h1>
        <p class="text-neutral-500">登录您的账户，继续您的旅程</p>
      </div>

      <!-- 表单 -->
      <form id="loginForm" class="space-y-6">
        <!-- 电子邮箱 -->
        <div class="space-y-2">
          <label for="email" class="block text-sm font-medium text-neutral-600">电子邮箱</label>
          <div class="relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
              <i class="fa-solid fa-envelope"></i>
            </span>
            <input type="email" id="email" name="email" placeholder="your@email.com"
              class="w-full pl-10 pr-4 py-3 rounded-lg border border-neutral-200 focus:outline-none focus:form-input-focus transition-all-300">
          </div>
          <p class="error-message text-red-500 text-xs hidden">请输入有效的电子邮箱</p>
        </div>

        <!-- 密码 -->
        <div class="space-y-2">
          <label for="password" class="block text-sm font-medium text-neutral-600">密码</label>
          <div class="relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
              <i class="fa-solid fa-lock"></i>
            </span>
            <input type="password" id="password" name="password" placeholder="输入您的密码"
              class="w-full pl-10 pr-12 py-3 rounded-lg border border-neutral-200 focus:outline-none focus:form-input-focus transition-all-300">
            <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600">
              <i class="fa-solid fa-eye-slash"></i>
            </button>
          </div>
          <div class="flex justify-between items-center">
            <p class="error-message text-red-500 text-xs hidden">请输入正确的密码</p>
            <a href="#" class="text-primary text-xs hover:underline">忘记密码？</a>
          </div>
        </div>

        <!-- 记住我 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember" name="remember" type="checkbox" class="w-4 h-4 text-primary focus:ring-primary/30 border-neutral-300 rounded">
            <label for="remember" class="ml-2 block text-sm text-neutral-500">记住我</label>
          </div>
        </div>

        <!-- 提交按钮 -->
        <div>
          <button type="submit" id="loginButton"
            class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all-300 transform hover:translate-y-[-2px] hover:shadow-lg flex items-center justify-center">
            <span>登录</span>
            <i class="fa-solid fa-arrow-right ml-2"></i>
          </button>
        </div>

        <!-- 没有账户 -->
        <div class="text-center text-neutral-500 text-sm">
          还没有账户？<a href="register.html" class="text-primary hover:underline font-medium">立即注册</a>
        </div>
      </form>

      <!-- 分隔线 -->
      <div class="my-8 flex items-center">
        <div class="flex-grow h-px bg-neutral-200"></div>
        <span class="flex-shrink mx-4 text-neutral-400 text-sm">或者使用以下方式登录</span>
        <div class="flex-grow h-px bg-neutral-200"></div>
      </div>

      <!-- 社交登录 -->
      <div class="grid grid-cols-3 gap-4">
        <button type="button" class="flex items-center justify-center py-3 border border-neutral-200 rounded-lg hover:bg-neutral-500 transition-all-300">
          <i class="fa-brands fa-google text-neutral-600"></i>
        </button>
        <button type="button" class="flex items-center justify-center py-3 border border-neutral-200 rounded-lg hover:bg-neutral-500 transition-all-300">
          <i class="fa-brands fa-facebook text-neutral-600"></i>
        </button>
        <button type="button" class="flex items-center justify-center py-3 border border-neutral-200 rounded-lg hover:bg-neutral-500 transition-all-300">
          <i class="fa-brands fa-twitter text-neutral-600"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- 成功提示 -->
  <div id="successToast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 flex items-center z-50">
    <i class="fa-solid fa-check-circle mr-2"></i>
    <span>登录成功！正在跳转...</span>
  </div>

  <!-- 错误提示 -->
  <div id="errorToast" class="fixed bottom-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 flex items-center z-50">
    <i class="fa-solid fa-exclamation-circle mr-2"></i>
    <span id="errorMessage">登录失败，请检查您的凭证</span>
  </div>

  <!-- 引入外部JavaScript文件 -->
  <script src="login.js"></script>
</body>
</html>